<script>
// import SuggestCard from '@/components/SuggestCard.vue'
import TypeIcon from '@/components/TypeIcon'
import { ref, reactive } from 'vue'
import { useLoad, useDidShow, setClipboardData, showToast, openLocation, showModal } from "@tarojs/taro"
import { useUserStore, useConfigStore, useOrderStore } from "@/stores";
import { switchTab, navigateTo } from '@/router'
import { activityDetail } from '@/api/index'
import './index.scss'
export default{
  components: { TypeIcon },
  setup(){
    // setNavigationBarTitle
    const type = ref(1) // 1 云剪, 2 实探, 3 置换, 4 摄影师, 5 纯佣
    const info = ref({ // 详情信息
      title: '',
    })
    const status = reactive({
      sign: false, // 是否已经报名
      order_id: '',
      created_at: '',
    })
    const showRulePop = ref(false)
    const picArr = ref([])
    const inprogress = ref(false)
    const user = useUserStore();
    const config = useConfigStore();
    const order = useOrderStore();
    useLoad((option) => {
      // 开启分享
      wx.showShareMenu({
          withShareTicket: true,
          menus: ['shareAppMessage', 'shareTimeline'],
      })
      if(option&&option.id){
        // 获取详情数据
        activityDetail(option.id).then(res=>{
          if(res.data){
            const { title, detail, start_time, end_time, time_int, main_package, shop_name, shop_address, poi,
              start_level, award_rule, careful_detail, location, tags, upload, activity_sing_money, id, sign_end_time,
              substitution_good, join_num, join_num_copy, activity_rule } = res.data;
            type.value = res.data.type
            info.value = {
              title, detail, start_time, end_time, time_int, main_package, shop_name, shop_address, poi,
              start_level, award_rule, careful_detail, location, tags, activity_sing_money, id, upload,
              substitution_good, join_num, join_num_copy, sign_end_time, activity_rule
            }
            picArr.value = upload.map(item=>item.full_path)
            const now = Date.now(),end = new Date(sign_end_time.replace(/-/g,'/')).getTime(),start = new Date(start_time.replace(/-/g,'/')).getTime()
            inprogress.value = (now<=end&&now>=start)
          }
        })
      }
    })
    useDidShow(()=>{
      const pageArr = getCurrentPages();
      const options = pageArr[ pageArr.length - 1].options;
      if(!options.id) return
      // 获取用户当前活动的一些状态
      user.userActivityStatus(options.id).then(r=>{
        if(r){
          status.sign = r.sign
          if(r.order){
            status.order_id = r.order.order_id
            status.created_at = r.order.created_at
          }
        }
      })
    })
    // const current = ref(0)
    // const matterType = ref(['产品', '环境氛围', '门头', '其它'])
    const applySignUp = () => {
      user.getUserInfo().then(()=>{
        // 不在活动时间范围内
        if(!inprogress.value) return showToast({title: '不在活动报名时间范围内',icon: 'none'});
        // 未登录
        if(!user.isLogin) return navigateTo({url: '/pages/login/index'})
        // 已报名
        if(status.sign) return showToast({title: '您已经报过名了', icon: 'none'});
        // 已登陆
        if(user.mode===1){
          // 未填写达人申请
          if(!user.info.star_is_submit) return navigateTo({url: '/pagesub/verify/index'})
          // 开启审核&&达人审核还未通过
          else if(config.oemInfo.star_is_auth&&!user.info.is_star) return showToast({title: '您的达人入驻审核还未通过',icon: 'none'})
          // 未进行抖音认证
          else if(!user.tiktok.is_authorization_expires) return navigateTo({url: '/pagesub/tiktokAuth/index'})
          // 抖音认证24小时等待
          else if(user.info.is_wait==1) return showToast({title: '您的达人抖音认证正在进行中，请耐心等待24小时',icon: 'none'})
          // 粉丝数量不够
          if(info.value.award_rule[0]&&(user.info.fans_num<info.value.award_rule[0].fans_num)) return showToast({title: '您的粉丝数量不满足活动要求', icon: 'none'});
        } else if(user.mode===2) {
          // 未填写摄影师入驻
          if(!user.info.photo_is_submit) return navigateTo({url: '/pagesub/photographer/index'})
          // 开启审核&&摄影师审核还未通过
          else if(config.oemInfo.photo_is_auth&&!user.info.is_photo_man) return showToast({title: '您的摄影师入驻审核还未通过',icon: 'none'})
        }
        if(Number(info.value.activity_sing_money)>0){
          // 开启了配置中的需要付费报名
          return showModal({
            title: '报名须知',
            content: `报名需支付${info.value.activity_sing_money}元保证金，在任务完成后自动退还到账户中，请务必在规定时间内完成任务要求，超时视为放弃任务， 报名费不再退还。`,
            success: function (res) {
              if (res.confirm) {
                order.setCreateBeforeAct({
                  ...info.value,
                  pic: picArr.value[0], 
                  order_id: status.order_id, 
                  type: type.value,
                  order_create: status.created_at,
                })
                navigateTo({url: '/pagesub/applypay/index'})
              }
            }
          })
        }else{
          // 无需报名费的活动开始进行报名
          const parame = {id: info.value.id, type: 1}
          // if(info.value.order_id) parame.order_id = info.value.order_id
          order.CreatApplyOrder(parame).then(res=>{
            if(res){
              // 报名成功
              showToast({title: '报名成功', icon: 'success', duration: 2000})
              config.setSelecTab(2)
              // 云剪和纯佣切换到进行中的任务，其他切换到等待中的任务
              order.setActiveTab([1,5].indexOf(type.value)>-1?1:0);
              setTimeout(()=> switchTab({url: '/pages/task/index'}), 2000)
            }
          })
        }
      })
    }
    const setClipboard = data => {
      setClipboardData({
        data,
        success: function () {
          showToast({title: '复制成功',icon: 'none'})
        }
      })
    }
    function backTohome(){
      switchTab({url: '/pages/home/index'})
    }
    function viewLocation(){
        const { latitude, longitude } = info.value.location
        openLocation({
            latitude: Number(latitude),
            longitude: Number(longitude),
        });
    }
    function openRules(){
        if(info.value.activity_rule){
          showRulePop.value = true
        }else{
          showToast({title: '活动暂未设置规则',icon: 'none'});
        }
    }
    return {
      info,
      type,
      picArr,
      inprogress,
      showRulePop,
      applySignUp,
      setClipboard,
      backTohome,
      viewLocation,
      openRules
    }
  },
  onShareAppMessage(res){
      const { title } = this.info
      const imageUrl = this.picArr[0]||'';
      const pages = getCurrentPages();
      let path = pages[pages.length - 1].$taroPath;      
      return {
          title,
          path,
          imageUrl,
      }
  },
  onShareTimeline(){
      const { title } = this.info
      const imageUrl = this.picArr[0]||'';
      return {
          title,
          imageUrl,
      }
  },
}
</script>

<template>
  <view class="detail-bg page2">
    <!-- 顶部滚动轮播图 -->
    <nut-swiper class="swiper-box" :pagination-visible="true" auto-play="3000" v-if="picArr.length>0">
      <nut-swiper-item v-for="item in picArr" :key="item">
        <cdn-img :src="item" class="topPic" mode="aspectFill"/>
      </nut-swiper-item>
    </nut-swiper>
    <cdn-img class="topPic" v-else/>
    <!-- 活动详情信息 -->
    <view class="content">
      <view class="talent-name talent-box">
        <view class="title">
          <TypeIcon class="shoot-a1" :type="type"/>
          <text class="tit_con">{{ info.title }}</text>
        </view>
        <view class="menu-list">
          <view class="menu-item" @click="openRules"><nut-icon name="tips" size="13px" color="#666666"></nut-icon><text>活动规则</text></view>
          <button class="menu-item" open-type="share"><nut-icon name="share" size="13px" color="#666666"></nut-icon><text>分享活动</text></button>
          <view class="menu-item">已报名{{ info.join_num_copy }}/需求{{info.join_num }}</view>
        </view>
      </view>

      <view class="talent-box" v-if="(type!==4)">
        <view class="task-item"><text class="name">任务时间</text>{{info.start_time}}至{{info.end_time}}</view>
        <view class="task-item"><text class="name">发布时间</text>领取任务{{info.time_int}}小时内必须完成</view>
        <view class="task-item"><text class="name">主推套餐</text>{{ info.main_package }}</view>
      </view>

      <view class="talent-shop-info talent-box">
        <view class="info-title">商家信息</view>
        <view class="info-detail" :class="{'info-detail-btn':[1,2,3].includes(type)}">
          <view class="info-text">商家名称：{{ info.shop_name }}</view>
          <view class="btn" v-if="[1,2,3].includes(type)" @click="setClipboard(info.shop_name)">复制</view>
        </view>
        <view class="info-detail info-detail-btn" v-if="(type!==4)">
          <view class="info-text">POI地址： {{info.poi}}</view>
          <view class="btn" @click="setClipboard(info.poi)">复制</view>
        </view>
        <view class="info-detail" :class="{'info-detail-btn':[1,2,3].includes(type)}">
          <view class="info-text">商家地址：{{info.shop_address}}</view>
          <view class="btn" v-if="[1,2,3].includes(type)" @click="viewLocation">导航</view>
        </view>
        <view class="info-detail" v-if="(type===4)">行业：{{ info.tags }}</view>
        <view class="info-detail" v-if="(type===4)">联系方式：商家确认后可见</view>
      </view>

      <view class="talent-box" v-if="(type!==4)">
        <view class="info-title">报名流程</view>
        <cdn-img src="/static/img/step.png" class="step" v-if="type===1"/>
        <cdn-img src="/static/img/step2.png" class="step" v-else-if="type===2"/>
        <cdn-img src="/static/img/step3.png" class="step" v-else-if="type===3"/>
        <cdn-img src="/static/img/step5.png" class="step" v-else-if="type===5"/>
      </view>

      <view class="talent-box" v-if="(type!==4)">
        <view class="info-title">达人要求</view>
        <view class="task-item"><text class="name">报名截止</text>{{ info.sign_end_time }}</view>
        <view class="task-item"><text class="name">招募人数</text>{{ info.join_num_copy }} / {{info.join_num }}</view>
        <view class="task-item"><text class="name">粉丝数量</text>≥<text v-if="info.award_rule">{{info.award_rule[0].fans_num}}</text></view>
        <view class="task-item"><text class="name">团购等级</text>等级LV{{info.start_level}}以上</view>
        <!-- <view class="task-item"><text class="name">达人区域</text>洛阳市区及县城</view> -->
      </view>

      <view class="talent-box" v-if="type===3&&info.substitution_good">
        <view class="info-title">置换-提供商品</view>
        <view class="task-item"><text class="name1">提供产品：</text>{{ info.substitution_good[0].goods_name }}</view>
        <view class="task-item"><text class="name1">产品价值：</text>{{ info.substitution_good[0].goods_price }}元</view>
      </view>

      <view class="talent-box" v-if="[3,5].indexOf(type)==-1">
        <view class="info-title"><span v-if="type===1">云探-</span>任务类型</view>
        <view class="task-t-item" v-for="item in info.award_rule" :key="item.fans_num">
          <view class="text">粉丝数量≥{{ item.fans_num }}</view>
          <view class="text money">单人任务金¥{{ item.money }}</view>
          <!-- <view class="text text1">已报名28/需求50</view> -->
        </view>
      </view>

      <!-- <view class="talent-box" v-if="(type===1)">
        <view class="info-title">素材下载</view>
        <view class="matter-box">
          <scroll-view :scroll-x="true" style="height: 80rpx;">
           <view class="tabs">
            <view class="tabs-item" v-for="(item,key) in matterType" :key="key" @click="current=key">
              {{item}}<text class="line" :class="{'line1':current===key}"></text>
            </view>
           </view>
          </scroll-view>
          <view class="mainBox">
            <view class="videoBox" v-for="(item,key) in 4" :key="key"></view>
          </view>
        </view>
      </view> -->

      <view class="talent-box" v-if="(type!==4)">
        <view class="info-title">任务详情</view>
        <rich-text class="task-detail" :nodes="info.detail"></rich-text>
      </view>

      <view class="talent-detail talent-box" v-if="(type===4)">
        <view class="info-title">任务简述</view>
        <rich-text class="task-detail" :nodes="info.detail"></rich-text>
        <!-- <view class="task-detail">{{ info.detail }}</view>
        <view class="info-detail">拍摄区域：河南洛阳</view>
        <view class="info-detail">拍摄要求：500段素材片段、方式不限、不提供设备</view>
        <view class="info-detail">摄影师要求：2年以上拍摄经验</view>
        <view class="info-detail">任务时间：2022-11-12022-11-3</view>
        <view class="info-detail">到店接待时间：10：00-20：00</view> -->
      </view>

      <view class="talent-detail talent-box">
        <view class="info-title">注意事项</view>
        <rich-text class="task-detail" :nodes="info.careful_detail "></rich-text>
        <!-- <view class="tips-box">
          <view class="tips-title">
            <nut-icon name="photograph" size="12px" color="#797979"></nut-icon>
            拍摄要求
          </view>
          <view class="tips-detail">1.配乐不能大于配音(音乐不要选过于吵/杂)·视预不得低于20 秒(建 议25-40秒)·视频镜头不得低于10个。 2.视频像素不能太低，播放速度不能过快·字幕不能遮挡主画面尽量协调·严格按商家要求#话题。</view>
        </view>

        <view class="tips-box">
          <view class="tips-title">
            <cdn-img src="/static/img/camera.png" class="tips-title-icon" />
            摄影师要求
          </view>
          <view class="tips-detail">1.配乐不能大于配音(音乐不要选过于吵/杂)·视预不得低于20 秒(建 议25-40秒)·视频镜头不得低于10个。 2.视频像素不能太低，播放速度不能过快·字幕不能遮挡主画面尽量协调·严格按商家要求#话题。</view>
        </view>

        <view class="tips-box">
          <view class="tips-title">
            <nut-icon name="tips" size="13px" color="#797979"></nut-icon>
            特别提醒
          </view>
          <view class="tips-detail">1.配乐不能大于配音(音乐不要选过于吵/杂)·视预不得低于20 秒(建 议25-40秒)·视频镜头不得低于10个。 2.视频像素不能太低，播放速度不能过快·字幕不能遮挡主画面尽量协调·严格按商家要求#话题。</view>
        </view> -->

      </view>

      <!-- <view class="suggest-box">
        <view class="title">— 推荐任务 —</view>
        <view class="list">
          <suggest-card v-for="(i,key) in 10" :key="key"></suggest-card>
        </view>
      </view> -->

    </view>

    <view class="footer-box safeArea">
      <view class="f-menu">
        <view class="f-menu-item f-menu-item1" @click="backTohome">
          <nut-icon name="home" size="20px" color="#333333"></nut-icon>
          首页
        </view>
        <button class="f-menu-item" openType="share">
          <nut-icon name="share" size="18px" color="#333333"></nut-icon>
          分享
        </button>
      </view>
      <view :class="['btns',inprogress?'btn-blue4':'btn-gray']" @click="applySignUp">立即报名</view>
    </view>
    <!-- 规则弹窗 -->
    <nut-dialog 
      title="活动规则" 
      text-align="left"
      :content="info.activity_rule" 
      v-model:visible="showRulePop" 
      @ok="showRulePop=false" 
      no-cancel-btn 
      lock-scroll
    />
  </view>
</template>
